import React, { useMemo, useState } from 'react';
import * as Doms from '../APreviewCom';
import { pxConversionMm, mmConversionPx } from "@/utils/transpxmm";


function PageItem({ page }) {
    let { width, height, components, unit } = page ?? {};
    //预览排除毫米影响
    let zoomwidth = useMemo(() => {
        if (unit == "mm") {
            return mmConversionPx(width)
        } else {
            return width
        }
    }, [unit, width]);

    let zoomheight = useMemo(() => {
        if (unit == "mm") {
            return mmConversionPx(height)
        } else {
            return height
        }
    }, [unit, height]);



    return (
        <div style={{ width: zoomwidth, height: zoomheight, zoom: 136 / zoomwidth }}>
            {
                components && components.map((item, i) => {
                    return React.createElement(Doms[item.type], { ...item, key: i });
                })
            }
        </div>
    );
}

export default PageItem;